<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>详细页面</title>
	<meta name="viewport" content="width=750,maximum-scale=1.0,user-scalable=no">
	<link rel="stylesheet" href="./style/reset.css" />
	<link rel="stylesheet" href="./style/style.css" />
	<link rel="stylesheet" href="./style/details.css" />

		<script type="text/javascript">
		(function (doc, win) {
		    var docEl = doc.documentElement,
		        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		        recalc = function () {
		            var clientWidth = docEl.clientWidth;
		            if (!clientWidth) return;
		            if (clientWidth>=750) {
		            	 // docEl.style.fontSize ='100px';
		            }else{
		            	docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
		            } 
		        };
		    // Abort if browser does not support addEventListener
		    if (!doc.addEventListener) return;
		    win.addEventListener(resizeEvt, recalc, false);
		    doc.addEventListener('DOMContentLoaded', recalc, false);
		})(document, window);
	</script>
	<script type="text/javascript">


	  function changeImage_home(){
	  	document.getElementById("home").src="./images/home_after.png";
	  }

	  function changeImage_home2(){
	  	document.getElementById("home").src="./images/home_before.png";
	  }


	  	  function changeImage_cut(){
	  	document.getElementById("cut").src="./images/cut_after.png";
	  }

	  function changeImage_cut2(){
	  	document.getElementById("cut").src="./images/cut_before.png";
	  }


    	  function changeImage_discover(){
	  	document.getElementById("discover").src="./images/discover_after.png";
	  }

	  function changeImage_discover2(){
	  	document.getElementById("discover").src="./images/discover_before.png";
	  }


   	  function changeImage_mine(){
	  	document.getElementById("mine").src="./images/mine_after.png";
	  }

	  function changeImage_mine2(){
	  	document.getElementById("mine").src="./images/mine_before.png";
	  }




	</script>
</head>
<body>

    <div class="body">
    <header>

			<div class="back fl">
				<li>
					<a href="#">Back</a>
				</li>
			</div>

			<div class="cut_word fl">
				<li>产品详细</li>
			</div>

			<div class="star">
				<ul class="star_img">
					

					<li><img src="./images/star2.png" alt=""></li>
				</ul>
			</div>

			<div class="clearfix"></div>
		</header>

		<div class="details_bg">
			<li><img src="./images/details_bg.png" alt=""></li>


		</div>

			<div class="clearfix"></div>

			<div class="buy">
			<li><a href="#">￥32</a></li>
			<li><a href="#">购买</a></li>
			</div>
	<div class="clearfix"></div>



	      <div class="critics">
	      	<li><img src="./images/star3.png" alt=""><h1>好评度<span>99%</span></h1></li>
	      	<li><h2>共605个评价></h2></li>



	      </div>

	      <div class="clearfix"></div>
       <div class="buss">
       	<li class="Apb_merchant"><span>适用商户</span> <h3>></h3></li>
  <div class="clearfix"></div>

       	<li>
       		
       		<ul class="detail">
       			<li class="detail_img">
       				<a href="#">正佳店</a>
       			</li>
       			<li class="detail_word">
       				<div >
       					<ul>
       						<li class="detail_w1">
       							<h1>万岁寿司(正佳店)</h1>

       						</li>
       						<li class="star_level">
       							<img src="./images/star3.png" alt="">
       							<img src="./images/star3.png" alt="">
       							<img src="./images/star3.png" alt="">
       							<img src="./images/star3.png" alt="">
       							<img src="./images/star3.png" alt="">
       							<span>10分</span>
       							<br>
	                             <h3>离你100米</h3>
	                             <br>
	                             <br>
	                             <a href="#">查看详情 >></a>
       						</li>

       						<li class="button_in">
       							<a href="#">进入</a>
       						</li>
       					</ul>
       				</div>
       				
       			</li>


       		</ul>
	<div class="clearfix"></div>

       		<ul class="detail">
       			<li class="detail_img">
       				<a href="#">体育西路店</a>
       			</li>
       			<li class="detail_word">
       				<div >
       					<ul>
       						<li class="detail_w1">
       							<h1>万岁寿司(体育西路店)</h1>

       						</li>
       						<li class="star_level">
       							<img src="./images/star3.png" alt="">
       							<img src="./images/star3.png" alt="">
       							<img src="./images/star3.png" alt="">
       							<img src="./images/star3.png" alt="">
       							<img src="./images/star3.png" alt="">
       							<span>10分</span>
       							<br>
	                             <h3>离你100米</h3>
	                             <br>
	                             <br>
	                             <a href="#">查看详情 >></a>
       						</li>

       						<li class="button_in">
       							<a href="#">进入</a>
       						</li>
       					</ul>
       				</div>
       				
       			</li>


       		</ul>
	<div class="clearfix"></div>

       		<ul class="detail">
       			<li class="detail_img">
       				<a href="#">昌岗店</a>
       			</li>
       			<li class="detail_word">
       				<div >
       					<ul>
       						<li class="detail_w1">
       							<h1>万岁寿司(昌岗店)</h1>

       						</li>
       						<li class="star_level">
       							<img src="./images/star3.png" alt="">
       							<img src="./images/star3.png" alt="">
       							<img src="./images/star3.png" alt="">
       							<img src="./images/star3.png" alt="">
       							<img src="./images/star3.png" alt="">
       							<span>10分</span>
       							<br>
	                             <h3>离你100米</h3>
	                             <br>
	                             <br>
	                             <a href="#">查看详情 >></a>
       						</li>

       						<li class="button_in">
       							<a href="#">进入</a>
       						</li>
       					</ul>
       				</div>
       				
       			</li>


       		</ul>
       	</li>
  <div class="clearfix"></div>







       </div>

  <div class="clearfix"></div>
		<footer>
			<nav>
				<a href="#">
					<img id="home" onmouseover="changeImage_home()" onmouseout="changeImage_home2()" src="./images/home_before.png" />
					<br />
					首页
				</a>
				<a href="#">
					<img id="cut" onmouseover="changeImage_cut()" onmouseout="changeImage_cut2()" src="./images/cut_before.png" />
					<br />
					分类
				</a>
				<a href="#">
					<img id="discover"  onmouseover="changeImage_discover()" onmouseout="changeImage_discover2()" src="./images/discover_before.png" />
					<br />
					发现
				</a>
				<a href="#">
					<img id="mine" onmouseover="changeImage_mine()" onmouseout="changeImage_mine2()" src="./images/mine_before.png" />
					<br />
					我的
				</a>
			</nav>
		</footer>



<pre>
	






























</pre>


















    </div>
	
</body>
</html>